<script setup lang='ts'>

import { ref, watch } from 'vue';

const props = defineProps<{ visible: boolean, stuInfo: object }>();
const emits = defineEmits<{ (e: 'update:visible', value: boolean): void, (e: 'handleSave', value: boolean): void }>();

const form = ref({});


import { reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { addStudents, classList, collegeList, editStudents } from '@/api/axios/studentsAxios';


interface RuleForm {
    /*** 既往病史*/
    anamnesis: string;
    /*** 班级*/
    classId: number;
    // classId: string
    /*** 学院*/
    collegeId: number;
    // collegeId: string
    /*** 学历*/
    education: string;
    /*** 入学时间*/
    enrollmentTime: string;
    /*** 心理诊断经历*/
    experience: string;
    /*** 家庭情况*/
    familyInfo: string;
    /*** 性别*/
    gender: string;
    /*** 年级*/
    grade: number;
    /*** 用药情况*/
    medicationSituation: string;
    /*** 姓名*/
    name: string;
    /*** 手机号*/
    phoneNumber: string;
    /*** 心理普测*/
    psychometricTest: string;
    /*** 其他*/
    remark: string;
    /*** 状态*/
    status: string;
    /*** 学号*/
    stuNum: string;
    birthday?: string;
    className?: string;
    college?: string;
    id?: string;
}

const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
watch(() => props.visible, () => {
    if (!ruleFormRef.value) return;
    if (props.visible) return;
    ruleFormRef.value.resetFields();

});
const ruleForm = ref<RuleForm>({
    name: '',
    collegeId: null,
    grade: null,
    classId: null,
    anamnesis: '',
    /*** 学历*/
    education: '',
    /*** 入学时间*/
    enrollmentTime: '',
    /*** 心理诊断经历*/
    experience: '',
    /*** 家庭情况*/
    familyInfo: '',
    /*** 性别*/
    gender: '',
    /*** 用药情况*/
    medicationSituation: '',
    /*** 手机号*/
    phoneNumber: '',
    /*** 心理普测*/
    psychometricTest: '',
    /*** 其他*/
    remark: '',
    /*** 状态*/
    status: '',
    /*** 学号*/
    stuNum: '',
    birthday: '',
    className: '',
    college: ''
});
// do not use same name with ref
watch(props, () => {
    ruleForm.value = JSON.parse(JSON.stringify(props.stuInfo));
});

// 学院列表
const colList = ref([]);
collegeList().then(res => {
    // console.log(res);
    colList.value = res.data;
    classData.value.deptId = res.data.deptId;
});

// 学历 eduOptions
const value = ref('');
const eduOptions = [
    {
        value: 'Option1',
        label: '本科生'
    },
    {
        value: 'Option2',
        label: '研究生'
    }
];

// 班级列表
// 班级
const classData = ref({
    deptId: null,
    name: ''
});
const classOptions = ref([]);
classList(classData.value).then(res => {
    // console.log(res);
    classOptions.value = res.rows;
});

watch(() => ruleForm.value.collegeId, () => {
    classData.value.deptId = ruleForm.value.collegeId;
    classList(classData.value).then(res => {
        // console.log(res);
        classOptions.value = res.rows;
    });
});

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, message: '姓名长度大于两个字符', trigger: 'blur' }
    ],
    collegeId: [
        {
            required: true,
            message: '请选择学院',
            trigger: 'blur'
        }
    ],
    grade: [
        {
            required: true,
            message: '请输入年级',
            trigger: 'blur'
        }
    ],
    className: [
        {
            // required: true,
            message: '请选择班级',
            trigger: 'blur'
        }
    ],
    education: [
        {
            required: true,
            message: '请选择学历',
            trigger: 'blur'
        }
    ],
    stuNum: [
        {
            required: true,
            message: '请输入学号',
            trigger: 'blur'
        }
    ],
    phoneNumber: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        }
    ],
    gender: [
        {
            required: true,
            message: '请选择性别',
            trigger: 'blur'
        }
    ],
    status: [
        {
            required: true,
            message: '请选择状态',
            trigger: 'blur'
        }
    ],
    enrollmentTime: [
        {
            required: true,
            message: '请选择入学时间',
            trigger: 'blur'
        }
    ],
    birthday: [
        {
            required: true,
            message: '请选择入学时间',
            trigger: 'blur'
        }
    ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            // console.log(ruleForm.value);

            if (ruleForm.value.id) {
                editStudents(ruleForm.value).then(res => {
                    // console.log(res);
                    emits('handleSave', true);
                    emits('update:visible', false);
                });
            } else {

                addStudents(ruleForm.value).then(res => {
                    // console.log(res);
                    emits('handleSave', true);
                    emits('update:visible', false);
                });
            }


        } else {
            console.log('error submit!', fields);
        }
    });
};


const handleClose = (formEl: FormInstance | undefined) => {
    emits('update:visible', false);
    if (!formEl) return;
    formEl.resetFields();

};

function save() {
    emits('update:visible', false);
}

const radio1 = ref('1');
</script>

<template>
    <el-dialog
        :model-value='props.visible'
        title='添加学生'
        width='800'
    >

        <!--        表单-->
        <el-form
            ref='ruleFormRef'
            style='max-width: 680px;overflow: hidden;margin: 0 auto'
            :model='ruleForm'
            :rules='rules'
            label-width='auto'
            class='demo-form-inline'
            :size="'large'"
            status-icon
        >
            <el-form-item label='学生姓名' prop='name' style='float: left'>
                <el-input v-model='ruleForm.name' maxlength='10' placeholder='请输入姓名' />
            </el-form-item>
            <el-form-item label='学院' prop='collegeId' style='float: right'>
                <el-select v-model='ruleForm.collegeId' placeholder='请选择学院'>
                    <el-option v-for='item in colList' :key=item.deptId :label=item.deptName :value=item.deptId />
                </el-select>
            </el-form-item>
            <el-form-item label='年级' prop='grade' style='float: left'>
                <el-input v-model='ruleForm.grade' placeholder='请输入年级' />
            </el-form-item>
            <el-form-item label='班级' prop='className' style='float: right'>
                <el-select v-model='ruleForm.className' placeholder='请选择班级'>
                    <el-option
                        v-for='item in classOptions'
                        :key='item.id'
                        :label='item.name'
                        :value='item.name'
                    />
                </el-select>
            </el-form-item>
            <el-form-item label='学号' prop='stuNum' style='float: left'>
                <el-input v-model='ruleForm.stuNum' placeholder='请输入学号' />
            </el-form-item>
            <el-form-item label='学历' prop='education' style='float: right'>
                <el-select v-model='ruleForm.education' placeholder='请选择学历'>
                    <el-option
                        v-for='item in eduOptions'
                        :key='item.value'
                        :label='item.label'
                        :value='item.value'
                    />
                </el-select>
            </el-form-item>
            <el-form-item label='手机号' prop='phoneNumber' style='float: left'>
                <el-input v-model='ruleForm.phoneNumber' placeholder='请输入手机号' />
            </el-form-item>
            <el-form-item label='性别' prop='gender' style='float: left;margin-left: 65px'>
                <el-radio-group v-model='ruleForm.gender'>
                    <el-radio label='1' size='large'>男</el-radio>
                    <el-radio label='2' size='large'>女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='状态' prop='status' style='float: left'>
                <el-radio-group v-model='ruleForm.status'>
                    <el-radio label='1' size='large'>正常</el-radio>
                    <el-radio label='2' size='large'>停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='入学时间' required style='float: right'>
                <el-col>
                    <el-form-item prop='enrollmentTime'>
                        <el-date-picker
                            v-model='ruleForm.enrollmentTime'
                            type='date'
                            label='请选择入学时间'
                            placeholder='请选择入学时间'
                            style='width: 100%'
                        />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label='出生日期' required style='float: left;'>
                <el-col>
                    <el-form-item prop='birthday'>
                        <el-date-picker
                            v-model='ruleForm.birthday'
                            type='date'
                            label='请选择出生日期'
                            placeholder='请选择出生日期'
                            style='width: 100%'
                        />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label='既往病史' prop='anamnesis' style='float: right'>
                <el-input
                    v-model='ruleForm.anamnesis'
                    style='width: 226px'
                    maxlength='300'
                    placeholder='请输入既往病史'
                    show-word-limit
                    type='textarea'
                    resize='none'
                    rows='4'
                />
            </el-form-item>
            <el-form-item label='心理诊断经历' prop='experience' style='float: left; margin-top: 54px;'>
                <el-input
                    v-model='ruleForm.experience'
                    style='width: 226px'
                    maxlength='300'
                    placeholder='请输入心理诊断经历'
                    show-word-limit
                    type='textarea'
                    resize='none'
                    rows='4'
                />
            </el-form-item>
            <el-form-item label='服药情况' prop='medicationSituation' style='float: right'>
                <el-input
                    v-model='ruleForm.medicationSituation'
                    style='width: 226px'
                    maxlength='300'
                    placeholder='请输入服药情况'
                    show-word-limit
                    type='textarea'
                    resize='none'
                    rows='4'
                />
            </el-form-item>
            <el-form-item label='家庭情况' prop='familyInfo' style='float: left'>
                <el-input
                    v-model='ruleForm.familyInfo'
                    style='width: 226px'
                    maxlength='300'
                    placeholder='请输入家庭情况'
                    show-word-limit
                    type='textarea'
                    resize='none'
                    rows='4'
                />
            </el-form-item>
            <el-form-item label='其他' prop='remark' style='float: right'>
                <el-input
                    v-model='ruleForm.remark'
                    style='width: 226px'
                    maxlength='300'
                    placeholder='请输入其他
'
                    show-word-limit
                    type='textarea'
                    resize='none'
                    rows='4'
                />
            </el-form-item>
        </el-form>


        <template #footer>
            <div class='dialog-footer'>
                <el-button @click='handleClose' size='large'>取消</el-button>
                <el-button type='primary' @click='submitForm(ruleFormRef)' size='large'>
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang='scss'>
.dialog-footer {
    text-align: center;
}

.el-form-item__label {
    font-weight: bold;
}

.dialog-footer {
    margin-top: -30px;
}
</style>
